<template>
  <div class="tool">
    <el-dropdown>
      <span class="el-dropdown-link" style="position:relative;">
        <i class="el-icon-more" style="position:absolute;top:0;right:3px;" />
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          icon="el-icon-edit"
          @click.native="neweditVariable"
        >编辑变量
        </el-dropdown-item>
        <el-dropdown-item
          icon="el-icon-delete"
          @click.native="newdeleteVarisible"
        >删除变量
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!-- 编辑变量弹框 -->
    <el-dialog
      title="编辑变量"
      append-to-body
      center
      :visible.sync="newaddVisible"
      width="40%"
    >
      <el-form
        ref="newruleForm"
        :model="newruleForm"
        :rules="newrules"
        label-width="100px"
        class="demo-ruleForm"
        @close="newaddVisibleClose"
      >
        <el-form-item label="变量名称" prop="name">
          <el-input v-model="newruleForm.name" style="width: 200px" />
        </el-form-item>
        <el-form-item label="变量描述">
          <el-input v-model="newruleForm.date1" style="width: 200px" />
        </el-form-item>
        <el-form-item label="题目类型" prop="resource">
          <el-radio-group v-model="newruleForm.resource">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">下拉</el-radio>
            <el-radio label="4">附件上传</el-radio>
            <el-radio label="5">文本框</el-radio>
            <el-radio label="7">时间</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 单选||多选 -->
        <div v-if="newruleForm.resource == 1 || newruleForm.resource == 2">
          <el-form-item label="选项" :required="true">
            <!-- 单个选项 -->
            <div
              v-for="(item, index) in newruleForm.questionDescribe"
              :key="index + 1214"
              style="margin-bottom: 5px"
            >
              <el-input v-model="item.text" style="width: 200px" />
              <span
                style="margin-left: 10px"
                @click="newminusSingleItem(item, index)"
              >x</span>
              <span
                v-if="index == 0"
                style="margin-left: 70px; color: red"
                @click="newmostDialogVisible = true"
              >批量操作</span>
            </div>
          </el-form-item>
          <el-form-item label="">
            <el-button
              type="text"
              size="default"
              @click="newaddSingleItem(1)"
            >+添加单个选项</el-button>
            <el-button
              type="text"
              size="default"
              @click="newaddSingleItem(2)"
            >+添加[其他]项</el-button>
          </el-form-item>
        </div>
        <div v-else-if="newruleForm.resource == 3">
          <el-form-item label="选项" :required="true">
            <!-- 单个选项 -->
            <div
              v-for="(item, index) in newruleForm.questionDescribe"
              :key="index + 1214"
              style="margin-bottom: 5px"
            >
              <el-input v-model="item.text" style="width: 200px" />
              <span
                style="margin-left: 10px"
                @click="newminusSingleItem(item, index)"
              >x</span>
            </div>
          </el-form-item>
          <el-form-item label="">
            <el-button
              type="text"
              size="default"
              @click="newaddSingleItem(1)"
            >+添加单个选项</el-button>
          </el-form-item>
        </div>
        <!-- 附件上传 -->
        <div v-else-if="newruleForm.resource == 4">
          <el-upload
            class="upload-demo"
            action="#"
            multiple
            :limit="3"
            disabled
          >
            <el-button size="small" type="primary" disabled>点击上传</el-button>
          </el-upload>

        </div>
        <!-- 文本 -->
        <div v-else-if="newruleForm.resource == 5">
          <el-form-item label="选项">
            <!-- <el-input v-model="ruleForm.desc" style="width:200px;" /> -->
            <el-select v-model="newtextInputValue" placeholder="请选择">
              <el-option
                v-for="item in firrstnewoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input
              v-model="newruleForm.desc"
              :type="newtextInputValue == 2 ? 'textarea' : ''"
              style="width: 200px"
            />
          </el-form-item>
        </div>
        <div v-else-if="newruleForm.resource == 7">
          <div class="block">
            <span class="demonstration" />
            <el-date-picker
              disabled
              type="datetime"
              placeholder="选择日期时间"
            />
          </div>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="newaddVisible = false">取 消</el-button>
        <el-button type="primary">确定</el-button>
      </span>
    </el-dialog>
    <!-- 批量修改弹框 -->
    <el-dialog
      title="批量修改选项"
      center
      append-to-body
      :visible.sync="newmostDialogVisible"
      width="30%"
      @close="newmostColse"
    >
      <span>每一行代表一个选项，可以添加多个选项</span>
      <el-input
        v-model="newmostData"
        placeholder="请输入内容"
        type="textarea"
        size="normal"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="newmostDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="newmostDialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newmostData: '', // 批量弹框数据
      newmostDialogVisible: false, // 批量弹框显示
      newaddVisible: false, // 编辑弹框显示
      newtextInputValue: '1',
      // 编辑变量弹框数据
      newruleForm: {
        name: '', // 名字
        date1: '', // 变量描述
        date2: '',
        resource: '1', // 选项类型
        desc: '',
        questionDescribe: [{ text: '' }]
      },
      newrules: {
        name: [
          { required: true, message: '请输入变量名称', trigger: 'blur' },
          {
            min: 1,
            max: 15,
            message: '长度在 1 到 15 个字符',
            trigger: 'blur'
          }
        ],
        date1: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ],
        date2: [
          {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }
        ],
        resource: [
          { required: true, message: '请选择题目类型', trigger: 'blur' }
        ]
      },
      // 文本类型
      firstNewOptions: [
        {
          value: '1',
          label: '单行文本框'
        },
        {
          value: '2',
          label: '多行文本框'
        }
      ]
    }
  },
  methods: {
    // 关闭添加变量弹框触发
    newaddVisibleClose() {
      // 清除数据
      this.$refs.newruleForm.clearValidate()
      this.newruleForm = {
        resource: '1', // 选项类型
        questionDescribe: [{ text: '' }]
      }
    },
    // 关闭批量操作触发
    newmostColse() {
      this.newmostData = ''
    },
    // 编辑变量
    neweditVariable() {
      console.log(4545)
      console.log(263, this.newruleForm)
      // this.newaddVisible = true
    },
    newdeleteVarisible() {
      // 先校验是否删除
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用删除函数
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 编辑变量弹框方法
    // 编辑单选多选输入框
    newaddSingleItem(id, index) {
      switch (id) {
        // 变量
        case 1:
          this.newruleForm.questionDescribe.push({ text: '' })
          break
        case 2:
          this.newruleForm.questionDescribe.push({ text: '其他____' })
          break
        // 题组
        case 3:
          console.log(3)
          this.newAddForm.varisibleItem[index].questionDescribe.push({
            text: ''
          })
          break
        default:
          this.newAddForm.varisibleItem[index].questionDescribe.push({
            text: '其他____'
          })
      }
    },
    // 减去单选多选输入框
    newminusSingleItem(id, index) {
      if (this.newruleForm.questionDescribe.length > 1) {
        this.newruleForm.questionDescribe.splice(index, 1)
      } else {
        this.$message.error('最少需要一个选项')
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
